<template>
	<div class="app-container">
		<comprehensive-table @selection-change="selectionChange" :columns="column" :data="data" @reset="reset"
			@onSubmit="onSubmit">

			<!-- 添加/删除按钮 -->
			<template v-slot:btn>
				<div style="display: flex;justify-content: flex-end">
					<el-button type="primary" @click="add"><el-icon>
							<plus />
						</el-icon> 添加</el-button>
					<el-button type="danger" @click="batchDelete"><el-icon>
							<delete />
						</el-icon>删除</el-button>
				</div>
			</template>

			<!-- 操作列插槽 -->
			<template v-slot:operation="scope">
				<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">编辑
				</el-button>
				<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">删除
				</el-button>
			</template>

		</comprehensive-table>
	</div>
</template>
<script>
	var dayjs = require('dayjs')
	import axios from 'axios';
	import ComprehensiveTable from './components/comprehensive.vue'

	const column = [{
			type: 'selection',
			width: 60,
		},
		{
			name: 'id',
			label: '订单编号',
			inSearch: true,
			valueType: 'input',
			width: 100,
		},
		{
			name: 'addressId',
			label: '收货地址',
			valueType: 'input',
			width: 160,
		},
		{
			name: 'commodityId',
			label: '商品id',
			inSearch: true,
			valueType: 'input',
			width: 80,
		},
		{
			name: 'userId',
			label: '用户Id',
			inSearch: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'images',
			label: '商品图片',
			width: 160,
			slot: 'images',
		},
		{
			name: 'name',
			label: '订单名称',
			valueType: 'input',
			width: 100,
		},
		{
			name: 'stateId',
			label: '订单状态ID',
			sorter: true,
			valueType: 'input',
			width: 100,
		},

		{
			name: 'createTime',
			label: '创建时间',
			sorter: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'modifyTime',
			label: '修改时间',
			sorter: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'operation',
			slot: true,
			fixed: 'right',
			width: 180,
		}
	]
	export default {
		components: {
			ComprehensiveTable
		},
		data() {
			return {
				data: [],
				column,
				rowObj: {},
				selectObj: [],
			}
		},
		methods: {
			selectionChange(val) {
				this.selectObj = val
			},
			reset() {
				this.$message.success('触发重置方法')
			},
			onSubmit() {
				this.$message.success('触发查询方法')
			}
		},
		// 查询全部订单列表
		mounted() {
			const stateId = 2; // 默认状态ID为1
			// 在组件挂载完成后，发送请求获取数据
			axios.get(`http://43.136.172.73/api/v1/order/state/${stateId}`, {
					headers: {
						'Authorization': 'sfsdf',
					}
				})
				.then(response => {
					// 请求成功，可以在这里处理返回的数据
					this.data = response.data.data;
					console.log('orderList', this.data);
				})
				.catch(error => {
					// 请求出错，可以在这里处理错误
					console.error(error);
				})
		}
	};
</script>
<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}
</style>